<template>
  <zm-view ref="view">
    <zm-navbar :border-bottom="false" background="transparent" immersive></zm-navbar>
    <view class="header-wrap">
      <view class="header-title flex flex-col">
        <text class="font-54 font-bold">好礼表心意</text>
        <text class="font-30 font-500 mt-26">岁月静好 却温柔彼此时光</text>
      </view>
      <view class="record-entry" @click="toView('pages/person/gift-giving-record/gift-giving-record')">记录</view>
      <view class="explain-entry" @click="handleClickExplain">说明</view>
      <image class="header-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/gift-giving-bg.png')" mode="scaleToFill" />
    </view>
    <view class="content-wrap">
      <zm-tabs v-model="tabType" :list="tabs" :scrollable="false" background="transparent" @change="handleTabChange"></zm-tabs>
      <zm-list ref="list" :options="options" @query="handleQuery">
        <block v-if="tabType === 'coupon'">
          <coupon
            v-for="(item, index) in list"
            :key="item.couponCode"
            custom-class="mx-24 mt-20"
            :info="item"
            show-type="select"
            from-type="giftGiving"
            :selected="item.selected"
            :show-tag="false"
            @click="handleClickCoupon(index, item)"
          ></coupon>
        </block>
        <block v-else-if="tabType === 'card'">
          <film-card
            v-for="(item, index) in list"
            :key="item.cardCode"
            custom-class="mx-30 mt-20"
            :info="item"
            show-type="select"
            :selected="item.selected"
            :show-tag="false"
            @click="handleClickCoupon(index, item)"
          ></film-card>
        </block>
      </zm-list>
    </view>
    <zm-footer v-if="list.length" z-index="10">
      <view class="p-24">
        <zm-button size="large" round :disabled="disabledSendButton" @click="handleClickSend">{{ sendButtonText }}</zm-button>
      </view>
    </zm-footer>
    <!-- 广告弹窗 -->
    <deco-ad-popup page="giftGiving"></deco-ad-popup>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { useImage } from "@/utils/hook"
import { mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      options: {
        emptyText: "暂无可赠送",
        emptyImage: useImage("/zuimei-film-oss/1.0.0/empty/zwzs-empty.png")
      },
      tabs: [],
      tabType: "coupon",
      list: []
    }
  },
  computed: {
    lsitApi() {
      const apis = { coupon: uni.$api.send.getCouponList, card: uni.$api.send.getCardList }
      return apis[this.tabType]
    },
    disabledSendButton() {
      // 检查list中每一个item的selected属性是否都为false
      return this.list.every((item) => !item.selected)
    },
    sendButtonText() {
      const count = this.list.filter((item) => item.selected).length
      return count ? `已选${count}份，前往转赠` : "请选择要赠送的好礼"
    },
    ...mapGetters(["baseInfo", "cardName"])
  },
  onLoad() {
    this.handleInit()
  },
  methods: {
    handleInit() {
      this.tabs = [
        { text: "优惠券", value: "coupon" },
        { text: this.cardName, value: "card" }
      ]

      uni.$on("refreshGiftGiving", () => {
        this.$nextTick(() => {
          this.$refs.list.refresh()
        })
      })
    },
    handleTabChange() {
      this.list = []
      this.$refs.list.refresh()
    },
    handleClickExplain() {
      if (this.baseInfo?.sendConfig?.rule) {
        uni.$setCache("richtext", {
          content: this.baseInfo?.sendConfig?.rule,
          title: "赠送说明"
        })
        uni.$toView("pages/utils/richtext/richtext")
      }
    },
    handleClickCoupon(index) {
      const list = this.list.filter((item) => item.selected)
      if (list.length >= 10 && !this.list[index].selected) {
        uni.$toast("一次最多赠送10张")
        return
      }
      this.list[index].selected = !this.list[index].selected
      this.$forceUpdate()
    },
    handleClickSend() {
      let list = []
      switch (this.tabType) {
        case "coupon":
          list = this.list.filter((item) => item.selected).map((item) => item.couponCode)
          break
        case "card":
          list = this.list.filter((item) => item.selected).map((item) => item.cardCode)
          break
      }
      if (list.length > 10) return uni.$toast("一次最多赠送10张")
      this.toView({
        url: "pages/person/gift-giving-confirm/gift-giving-confirm",
        params: {
          giftIds: list.join(","),
          giftType: this.tabType
        }
      })
    },
    async handleQuery({ page, pageSize, fail, success }) {
      try {
        const list = await this.lsitApi({ page, pageSize })
        switch (this.tabType) {
          case "coupon":
            this.list = list.map((item) => {
              return {
                ...item,
                selected: false,
                couponName: item.name,
                couponId: item.couponCode,
                fullAmount: item.fullMoney,
                sD: item.startTime,
                eD: item.endTime,
                showReduce: item.reduceMoney
              }
            })
            break
          case "card":
            this.list = list.map((item) => {
              return { ...item, selected: false, sD: item.startTime, eD: item.endTime }
            })
            break
        }
        this.list.forEach((item) => (item.selected = false))
        success({ list: this.list, total: this.list.length })
      } catch (e) {
        fail()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header-wrap {
  width: 100%;
  height: 454rpx;
  position: relative;
  .header-title {
    z-index: 1;
    position: absolute;
    left: 58rpx;
    bottom: 122rpx;
    color: #333333;
  }
  .header-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 454rpx;
    position: absolute;
  }
  .record-entry,
  .explain-entry {
    right: 0;
    z-index: 1;
    width: 40rpx;
    color: #fff;
    height: 100rpx;
    display: flex;
    position: absolute;
    align-items: center;
    letter-spacing: 6rpx;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16rpx 0rpx 0rpx 16rpx;
  }
  .record-entry {
    bottom: 130rpx;
  }
  .explain-entry {
    bottom: 10rpx;
  }
}

.content-wrap {
  flex: 1;
  width: 100%;
  z-index: 1;
  padding-top: 0;
  overflow: hidden;
  margin-top: -24rpx;
  position: relative;
  border-radius: 16rpx;
  background-color: var(--page-color);
}
</style>
